/*@height:2px;
@width:18px;
// @bgcolor:currentColor;
@bgcolor:#00b4cf;

@ratio:1.4142;
@rotate:45deg;
@scale:@ratio / (@ratio + 1);
@maigin:@height * 3;
@ty:@width / 4 - @height / @ratio;
@tx:@width / 4 + @height / @ratio;
@anitime:.3s;
*/
.anico{
  --height:2px;
  --width:18px;
  --bgColor:#00b4cf;
  --ratio:1.4142;
  --rotate:45deg;
  --anitime:.3s;
  --scale:calc(var(--ratio) / (var(--ratio) + 1));
  --maigin:calc(var(--height) * 3);
  --ty:calc(var(--width) / 4 - var(--height) / var(--ratio));
  --tx:calc(var(--width) / 4 + var(--height) / var(--ratio));
  
  position:relative;
  display:inline-block;
  height:100%;
  width:var(--width);
  .hline,.hline::before,.hline::after{
    position:absolute;
    background-color:var(--bgColor);
    border-radius:2px;
    transform:translateZ(0);
  }
  .hline{
    width:var(--width);
    height:var(--height);
    display:inline-block;
    left:50%;
    top:50%;
    transform:translateX(-50%) translateY(-50%);
    transition:transform var(--anitime),background-color var(--anitime);
    &::before,&::after{
      content:"";
      width:100%;
      height:100%;
      top:0;
      left:0;
      background-color:currentColor;
      transition:transform var(--anitime);
    }
    &::before{
      transform:translateY(calc(0px - var(--maigin)));
    }
    &::after{
      transform:translateY(var(--maigin));
    }
    &.close{
      background-color:rgba(255,255,255,0);
      &::before{
        transform:rotate(var(--rotate));
      }
      &::after{
        transform:rotate(calc(0deg - var(--rotate)));
      }
    }
    &.right{
      &::before{
        transform:translateX(var(--tx)) translateY(calc(0px - var(--ty))) rotate(var(--rotate)) scaleX(var(--scale));
      }
      &::after{
        transform:translateX(var(--tx)) translateY(var(--ty)) rotate(calc(0deg - var(--rotate))) scaleX(var(--scale));
      }
    }
    &.bottom{
      transform:translateX(-50%) translateY(-50%) rotate(-90deg);
      &::before{
        transform:translateX(calc(0px - var(--tx))) translateY(calc(0px - var(--ty))) rotate(calc(0deg - var(--rotate))) scaleX(var(--scale));
      }
      &::after{
        transform:translateX(calc(0px - var(--tx))) translateY(var(--ty)) rotate(var(--rotate)) scaleX(var(--scale));
      }
    }
    &.play{
      transform:translateX(-50%) translateY(-50%) rotate(-90deg);
      background-color:rgba(0,0,0,0);
      &::before{
        transform-origin:0 0;
      }
      &::after{
        transform-origin:100% 100%;
      }
      &.pause{
        background-color:var(--bgColor);
        transform:translateX(-75%) translateY(-50%) rotate(-90deg);
        &::before{
          transform:rotate(60deg);
        }
        &::after{
          transform:rotate(-60deg);
        }
      }
    }
  }
}

@media screen and (max-width:1024px){
  .anico{
    .hline{
      &.right{
        background-color:rgba(255,255,255,0);
        &::before{
          transform:rotate(45deg);
        }
        &::after{
          transform:rotate(-45deg);
        }
      }
    }
  }
}

